<template>
  <div class="cart_page">
    <Tips />

    <van-checkbox-group v-model="result" @change="checkboxClick">
      <van-checkbox
        :disabled="editStatus"
        :label-disabled="editStatus"
        :name="item.product_id"
        v-for="item in cartList"
        :key="item.id"
      >
        <van-card
          :num="item.number"
          :price="item.market_price.toFixed(2)"
          :title="item.goods_name"
          :thumb="item.list_pic_url"
        >
          <template #footer>
            <van-stepper
              v-show="editStatus"
              v-model="item.number"
              min="1"
              integer
            />
          </template>
        </van-card>
      </van-checkbox>
    </van-checkbox-group>

    <van-submit-bar
      :price="cartTotal.checkedGoodsAmount * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="quanxuan">全选</van-checkbox>
      <template #tip>
        累计共{{ cartTotal.goodsCount }}件商品，可点击
        <van-button
          :type="editStatus ? 'danger' : 'primary'"
          size="small"
          @click="editFn"
          >{{ editStatus ? "完成编辑" : "编辑" }}</van-button
        >
        按钮进行商品数量修改
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import Tips from "@/components/Tips.vue";
import { CartDataApi, GoodsSelectApi } from "@/request/api";
export default {
  computed: {
    // 全选checkbox的值
    quanxuan: {
      get() {
        // 获取这个quanxuan字段的值
        return this.cartTotal.checkedGoodsCount == this.cartTotal.goodsCount;
      },
      set(val) {
        // 当这个值修改的时候，你要去做什么
        // console.log(val); // true/false
        // result是已经被你选中的结果

        // 重新提取整个cartList数组的product_id,拼成一个id数组
        let arr = [];
        this.cartList.map((item) => {
          arr.push(item.product_id);
        });

        // 切换全选状态，通过接口调用
        GoodsSelectApi({
          isChecked: val ? 1 : 0,
          productIds: arr.join(),
        }).then((res) => {
          if (res.errno === 0) {
            // 重新渲染当前页面的所有数据
            this.cartTotal = res.data.cartTotal;
            this.cartList = res.data.cartList;
            this.result = []; // 清空result
            this.cartList.map((item) => {
              if (item.checked === 1) {
                this.result.push(item.product_id);
              }
            });
          }
        });
      },
    },
  },
  data() {
    return {
      // 复选框的选中值
      result: [],
      // 步进器的值
      stepNum: 0,
      // 商品列表
      cartList: [],
      // 编辑状态，默认是false
      editStatus: false,
      // 商品总数
      cartTotal: {},
    };
  },
  methods: {
    onSubmit() {},
    onClickEditAddress() {},
    // 编辑按钮
    editFn() {
      // 将编辑状态取反
      this.editStatus = !this.editStatus;
      // 处于编辑状态时，是红色
    },
    // 列表单项的点击
    checkboxClick() {
      // 看一下谁被选中了
      console.log(this.result);
    },
  },
  components: {
    Tips,
  },
  created() {
    CartDataApi().then((res) => {
      console.log(res.data);
      if (res.errno === 0) {
        let { cartList, cartTotal } = res.data;
        this.cartList = cartList;
        this.cartTotal = cartTotal;
        /* 
          cartList数组中，每一项的checked只要等于1，就选中该项 【result】
          result数组中的值其实是每一项的id
          cartList数组中，某一项的checked为1，那么这一项的id就应该被放到result中去
        */
        this.cartList.map((item) => {
          if (item.checked === 1) {
            this.result.push(item.product_id);
          }
        });
      }
    });
  },
};
</script>
 
<style lang = "less" scoped>
.cart_page {
  padding-bottom: 160px;
  .van-submit-bar {
    bottom: 50px;
    .van-submit-bar__tip {
      display: flex;
      align-items: center;
    }
  }

  /deep/.van-checkbox-group {
    background: #fff;
    padding: 0 10px;
    .van-checkbox {
      border-bottom: 1px solid #ccc;
      .van-checkbox__label {
        flex: 1;
      }
    }
  }
}
</style>